.main-integral {
    width: 100%;
    height: 111vh;
    background-color: rgb(243, 241, 242);
    position: relative;
    .main-integral-header {
        height: 1.2195121951219512rem;
        background-color: rgb(255, 255, 255);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 0.24390243902439024rem;
        align-items: center;
        .main-integral-header-con {
            display: flex;
            flex-direction: row;
            align-items: center;
            .main-integral-header-con-span-one {
                font-size: 0.3902439024390244rem;
                font-weight: 800;
                color: #fff;
           }
            .main-integral-header-con-span-two {
                font-size: 0.3902439024390244rem;
                font-weight: 800;
                margin-left: 0.14634146341463414rem;
                color: #fff;
           }
       }
        h4 {
            font-size: 0.43902439024390244rem;
            line-height: 0.8536585365853658rem;
       }
        img {
            width: 0.4878048780487805rem;
            height: 0.4878048780487805rem;
       }
   }
    .main-integral-balance {
        height: 3.268292682926829rem;
        background-color: rgb(191, 238, 246);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        line-height: 0.975609756097561rem;
        h3 {
            font-size: 0.3902439024390244rem;
       }
        h4 {
            font-size: 0.4878048780487805rem;
            letter-spacing: 0.14634146341463414rem;
       }
   }
    .main-integral-log {
        width: 100%;
        height: 2.4390243902439024rem;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        background-color: rgb(255, 255, 255);
        position: relative;
        .main-integral-left {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 0;
            background: #fff;
            border-radius: 0.4878048780487805rem;
            width: 2.1951219512195124rem;
            img {
                width: 1.3414634146341464rem;
                height: 1.3414634146341464rem;
                position: relative;
           }
            h3 {
                font-size: 0.3902439024390244rem;
                line-height: 0.5609756097560976rem;
                position: relative;
           }
       }
        .main-integral-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 2.1951219512195124rem;
            position: relative;
            border-radius: 0.4878048780487805rem;
            img {
                width: 1.3414634146341464rem;
                height: 1.3414634146341464rem;
           }
            h3 {
                font-size: 0.3902439024390244rem;
                line-height: 0.5609756097560976rem;
           }
       }
        .main-integral-right {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 2.1951219512195124rem;
            img {
                width: 1.3414634146341464rem;
                height: 1.3414634146341464rem;
           }
            h3 {
                font-size: 0.3902439024390244rem;
                line-height: 0.5609756097560976rem;
           }
       }
   }
    .main-integral-exchange {
        width: 100%;
        height: auto;
        background-color: rgb(255, 255, 255);
        margin-top: 0.24390243902439024rem;
        padding: 0.36585365853658536rem;
        position: relative;
        h4 {
            font-size: 0.2926829268292683rem;
            margin-left: 0.7804878048780488rem;
       }
        .main0integral-300-500-1000 {
            display: flex;
            flex-direction: row;
            justify-content: start;
            align-items: center;
            flex-wrap:wrap ;
            .main-integral-300 {
                margin-top: 0.34146341463414637rem;
                width: 45%;
                height: 2.4390243902439024rem;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                border-radius: 0.24390243902439024rem;
                border: 0.04878048780487805rem solid rgb(27, 144, 198);
                line-height: 0.43902439024390244rem;
                margin-left: 0.24390243902439024rem;
                .main-integral-top {
                    display: flex;
                    flex-direction: row;
                    h4 {
                        font-size: 0.6341463414634146rem;
                        color: rgb(25, 144, 199);
                        font-weight: 700;
                        margin-left: 0rem !important;
                        line-height: 0.6829268292682927rem;
                   }
                    h5 {
                        margin-left: 0.12195121951219512rem;
                        font-size: 0.2926829268292683rem;
                        width: 1.0731707317073171rem;
                        flex-wrap: wrap;
                   }
               }
                .main-integral-bottom {
                    width: 2.4390243902439024rem;
                    height: 0.43902439024390244rem;
                    align-items: center;
                    background-color: rgb(25, 145, 198);
                    border-radius: 0.07317073170731707rem;
                    color: #fff;
                    margin-top: 0.1951219512195122rem;
                    line-height: 0.43902439024390244rem;
                    text-align: center;
               }
           }
            .main-integral-300:nth-child(1){
           }
            .main-integral-500 {
                margin-top: 0.24390243902439024rem;
                width: 45%;
                height: 2.4390243902439024rem;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                border-radius: 0.24390243902439024rem;
                border: 0.04878048780487805rem solid rgb(27, 144, 198);
                line-height: 0.43902439024390244rem;
                margin-left: 0.4878048780487805rem;
                .main-integral-top {
                    display: flex;
                    flex-direction: row;
                    h4 {
                        font-size: 0.6341463414634146rem;
                        color: rgb(25, 144, 199);
                        font-weight: 700;
                        margin-left: 0rem !important;
                        line-height: 0.6829268292682927rem;
                   }
                    h5 {
                        margin-left: 0.12195121951219512rem;
                        font-size: 0.2926829268292683rem;
                        width: 1.0731707317073171rem;
                        flex-wrap: wrap;
                   }
               }
                .main-integral-bottom {
                    width: 2.4390243902439024rem;
                    height: 0.43902439024390244rem;
                    align-items: center;
                    background-color: rgb(25, 145, 198);
                    border-radius: 0.07317073170731707rem;
                    color: #fff;
                    margin-top: 0.1951219512195122rem;
                    line-height: 0.43902439024390244rem;
                    text-align: center;
               }
           }
            .main-integral-1000 {
                margin-top: 0.36585365853658536rem;
                width: 45%;
                height: 2.4390243902439024rem;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                border-radius: 0.24390243902439024rem;
                border: 0.04878048780487805rem solid rgb(27, 144, 198);
                line-height: 0.43902439024390244rem;
                margin-left: 0.24390243902439024rem;
                .main-integral-top {
                    display: flex;
                    flex-direction: row;
                    h4 {
                        font-size: 0.6341463414634146rem;
                        color: rgb(25, 144, 199);
                        font-weight: 700;
                        margin-left: 0rem !important;
                        line-height: 0.6829268292682927rem;
                   }
                    h5 {
                        margin-left: 0.12195121951219512rem;
                        font-size: 0.2926829268292683rem;
                        width: 1.0731707317073171rem;
                        flex-wrap: wrap;
                   }
               }
                .main-integral-bottom {
                    width: 2.4390243902439024rem;
                    height: 0.43902439024390244rem;
                    align-items: center;
                    background-color: rgb(25, 145, 198);
                    border-radius: 0.07317073170731707rem;
                    color: #fff;
                    margin-top: 0.1951219512195122rem;
                    line-height: 0.43902439024390244rem;
                    text-align: center;
               }
           }
       }
   }
    .integralStart{
        position: absolute;
        width: 8.292682926829269rem;
        height: 3.1707317073170733rem;
        top: 7.073170731707317rem;
        left: 1.4634146341463414rem;
        z-index: 800;
        img{
            margin-left: 1.7073170731707317rem;
       }
        .navigator-good-clear-integral{
            width: 100%;
            display: flex;
            flex-direction: row;
            .naviagtor-good-clear-order-integral{
                width: 20%;
                margin-left: 1.4634146341463414rem;
                color: skyblue;
                text-decoration: underline;
           }
            .naviagtor-guide-page-good-message-integral{
                width: 50%;
                color: #fff;
                line-height: 0.4146341463414634rem;
                margin-top: -0.7073170731707317rem;
                margin-left: 0.1951219512195122rem;
                overflow: hidden;
                border: 0.024390243902439025rem solid #fff;
                height: 2.5365853658536586rem;
                padding: 0.2926829268292683rem;
                border-radius: 0.24390243902439024rem;
           }
       }
   }
    .goodsIntegralExchange{
        position: absolute;
        top: 4.878048780487805rem;
        z-index: 21.951219512195124rem;
        color: #fff;
   }
    .integralDetail {
        position: absolute;
        display: flex;
        flex-direction: column;
        top: 3.926829268292683rem;
        width: 7.317073170731708rem;
        height: 9.75609756097561rem;
        background-color: #fff;
        box-shadow:0rem 0rem 0.24390243902439024rem skyblue;
        z-index: 1000;
        left: 1.2195121951219512rem;
        border-radius: 0.975609756097561rem;
        padding: 0.4878048780487805rem;
        .integralTitle {
            width: 100%;
            align-items: center;
            text-align: center;
            line-height: 0.8292682926829268rem;
       }
        p {
            margin-top: 0.4878048780487805rem;
            margin-bottom: 0.24390243902439024rem;
            text-align: center;
            font-size: 0.6829268292682927rem;
            margin-top: 1.853658536585366rem;
            .integralspan1 {
                font-size: 0.3902439024390244rem;
                font-weight: 800;
                margin-top: 0.4878048780487805rem;
           }
            .integralspan2 {
                font-size: 0.43902439024390244rem;
                color: #da1313;
           }
       }
        .integralDetailDesc {
            text-indent: 2em;
            line-height: 0.5365853658536586rem;
            height: 2.8536585365853657rem;
            margin-top: 0.24390243902439024rem;
       }
        h3{
            font-size: 0.5853658536585366rem;
            width: 0.7317073170731707rem;
            height: 0.7317073170731707rem;
            border-radius: 0.7317073170731707rem;
            border: 0.024390243902439025rem solid skyblue;
            text-align: center;
            line-height: 0.6097560975609756rem;
            align-items: center;
            margin-left: 44%;
            margin-top: 2.4390243902439024rem;
       }
   }
}
